<template>
  <div ref="netSec" class="net-sec" style="width:100%;height:100%;"></div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.netSec, this.theme);
      let color = [
        "#52A8FF",
        "#00B389",
        "#FFA940",
        "#FF5A57",
        "#29EFC4",
        "#F8AEA4",
        "#FFC53D",
        "#009982",
        "#C099FC",
        "#F5855F",
      ];
      let sum = 0;
      let l = 0;
      let _self = this;
      let option = {
        tooltip: { show: true },
        grid: { left: 10, top: 10, bottom: 20, right: 100, containLabel: true },
        xAxis: {
          show: false,
          type: "value",
          boundaryGap: false,
          max: 20, // Math.ceil(max / 4) * 5 || 10
          axisLine: { show: false, lineStyle: { color: "#ccc" } },
          axisTick: { show: false },
          axisLabel: {
            show: true,
          
              color: "rgba(255,255,255,0.5)",
            
          },
          splitLine: {
            show: false,
            lineStyle: { color: ["#CEEDFF"], type: [5, 8], dashOffset: 3 },
          },
        },
        yAxis: {
          type: "category",
          data: ["正常", "缓慢", "非常缓慢", "错误"],
          axisLine: { show: false, lineStyle: { color: "#ccc" } },
          axisTick: { show: false, length: 3 },
          axisLabel: {
            show: true,
              color: "rgba(255,255,255,0.5)",
            margin: 16,
            padding: 0,
          },

          inverse: false,
        },
        series: [
          {
            name: "数量",
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(82, 168, 255, 0.1)",
              borderRadius: 0,
            },
            itemStyle: {
                borderRadius: 0,
                color: function (params) {
                  // 定义一个颜色集合
                  let colorList = color;
                  // 对每个bar显示一种颜色
                  return colorList[params.dataIndex];
                },

            },
            barMaxWidth: 16,
            label: {
              show: true,
              position: [260, 2],
              color: "rgba(255,255,255,0.5)",
              fontSize: 14,
              formatter: "{c}",
            },
            data: [15, 12, 12, 11],
          },
        ],
      };

      this.chartInstance.setOption(option);
    },
    getData() {
      this.allData = {};
    },
    updateChart() {},
  },
  mounted() {
    this.initChart();
        // 添加随页面变化而变化
    window.addEventListener('resize', () => {
       this.chartInstance.resize()
    })
  },
      destroyed () {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

<style lang="scss" scoped>
.net-sec {
  width: 100%;
  height: 45%;
}
</style>
